<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理 - 软件下载</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles if needed, e.g., for specific form elements or animations */
        .fade-in {
            animation: fadeIn 0.5s ease-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-overlay {
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">

    <!-- Login Page (Hidden by default, shown based on JS) -->
    <div id="loginPage" class="flex items-center justify-center min-h-screen bg-gray-900 fade-in">
        <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-sm">
            <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">后台登录</h2>
            <div class="mb-4">
                <label for="username" class="block text-gray-700 text-sm font-bold mb-2">用户名:</label>
                <input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="admin">
            </div>
            <div class="mb-6">
                <label for="password" class="block text-gray-700 text-sm font-bold mb-2">密码:</label>
                <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" value="password">
            </div>
            <div class="flex items-center justify-between">
                <button id="loginBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full">
                    登录
                </button>
            </div>
            <p id="loginMessage" class="text-red-500 text-xs italic mt-4 text-center hidden">用户名或密码错误！</p>
        </div>
    </div>

    <!-- Admin Dashboard (Hidden by default, shown after login) -->
    <div id="adminDashboard" class="min-h-screen flex flex-col hidden">
        <!-- Header -->
        <header class="bg-gray-800 text-white py-4 shadow-md">
            <div class="container mx-auto px-4 flex justify-between items-center">
                <h1 class="text-2xl font-bold">软件下载管理</h1>
                <nav>
                    <ul class="flex items-center space-x-4">
                        <li><a href="/" class="hover:text-gray-300 transition-colors duration-300">前往前端</a></li>
                        <li><button id="logoutBtn" class="bg-red-600 hover:bg-red-700 px-3 py-2 rounded transition-colors duration-300"><i class="fas fa-sign-out-alt mr-2"></i>退出登录</button></li>
                    </ul>
                </nav>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-grow py-8 px-4">
            <div class="container mx-auto">
                <h2 class="text-3xl font-bold text-gray-700 mb-6 flex items-center justify-between">
                    管理软件列表
                    <button id="addSoftwareBtn" class="bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-md transition-colors duration-300 flex items-center">
                        <i class="fas fa-plus-circle mr-2"></i>添加新软件
                    </button>
                </h2>

                <!-- Software List Table -->
                <div class="bg-white shadow-md rounded-lg overflow-hidden">
                    <table class="min-w-full leading-normal">
                        <thead>
                            <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                                <th class="py-3 px-6 text-left">ID</th>
                                <th class="py-3 px-6 text-left">名称</th>
                                <th class="py-3 px-6 text-left">描述</th>
                                <th class="py-3 px-6 text-left">链接</th>
                                <th class="py-3 px-6 text-left">类别</th>
                                <th class="py-3 px-6 text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody id="softwareList">
                            <!-- Software items will be rendered here by JavaScript -->
                        </tbody>
                    </table>
                </div>
                <p id="noSoftwareMessage" class="text-center text-gray-500 mt-8 hidden">目前还没有软件，点击“添加新软件”开始吧！</p>
            </div>
        </main>

        <!-- Footer -->
        <footer class="bg-gray-200 text-gray-600 py-4 text-center text-sm">
            <div class="container mx-auto px-4">
                <p>&copy; 2024 后台管理系统. All rights reserved.</p>
            </div>
        </footer>
    </div>

    <!-- Add/Edit Software Modal (Hidden by default) -->
    <div id="softwareModal" class="fixed inset-0 z-50 hidden flex items-center justify-center modal-overlay">
        <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-lg mx-4 fade-in">
            <h3 id="modalTitle" class="text-2xl font-bold mb-6 text-gray-800">添加新软件</h3>
            <form id="softwareForm">
                <input type="hidden" id="softwareId">
                <div class="mb-4">
                    <label for="softwareName" class="block text-gray-700 text-sm font-bold mb-2">软件名称:</label>
                    <input type="text" id="softwareName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                </div>
                <div class="mb-4">
                    <label for="softwareDescription" class="block text-gray-700 text-sm font-bold mb-2">描述:</label>
                    <textarea id="softwareDescription" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="softwareLink" class="block text-gray-700 text-sm font-bold mb-2">下载链接:</label>
                    <input type="url" id="softwareLink" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                </div>
                <div class="mb-4">
                    <label for="softwareCategory" class="block text-gray-700 text-sm font-bold mb-2">类别:</label>
                    <select id="softwareCategory" class="shadow border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                        <option value="">请选择类别</option>
                        <option value="软件">软件</option>
                        <option value="网站源码">网站源码</option>
                        <option value="Clash Config 订阅地址">Clash Config 订阅地址</option>
                        <option value="Docker Images">Docker Images</option>
                        <option value="Linux Shell Tools">Linux Shell Tools</option>
                        <option value="Linux Shell Script">Linux Shell Script</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label for="softwareIconClass" class="block text-gray-700 text-sm font-bold mb-2">图标CSS类 (Font Awesome):</label>
                    <input type="text" id="softwareIconClass" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="例如: fas fa-desktop 或 fab fa-windows" required>
                    <p class="text-gray-500 text-xs mt-1">
                        查看 <a href="https://fontawesome.com/icons" target="_blank" class="text-blue-500 hover:underline">Font Awesome图标库</a> 获取更多类名。
                    </p>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" id="cancelSoftwareBtn" class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">取消</button>
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script src="admin.js"></script>
</body>
</html>
